<template>
  <div id="preFraction" class="main" v-loading="tableLoading">
    <div v-if="isVIP != 0">
      <div
        style="position: sticky; z-index: 99; width: 1200px; top: 45px; left: 0"
      >
        <div style="padding: 20px 0; background: #fff">
          <el-select
            no-data-text="暂无数据"
            v-model="selecttextDX6"
            placeholder=" "
            @change="yearChange"
            style="width: 90px"
          >
            <el-option
              v-for="item in popArrDX6"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </div>
        <div
          class="pre-tr pre-head-tr text-center fw600 f14 pre-gaokao df"
          style="
            color: #86909c !important;
            border-left: 1px solid #ebeef5;
            border-top: 1px solid #ebeef5;
            border-bottom: 1px solid #ebeef5;
          "
        >
          <div class="pre-td pre-td-code nborderbo">代码</div>
          <div class="pre-td pre-td-name nborderbo">院校/专业名称</div>
          <div class="pre-td pre-td-plan nborderbo">计划</div>
          <div class="pre-td pre-td-cose nborderbo">学费</div>
          <div class="pre-td pre-td-year nborderbo">学制</div>
          <div class="pre-td pre-td-choosesubject nborderbo">选科</div>
        </div>
      </div>

      <!-- 悬浮动态title -->
      <div
        v-show="isShow"
        class="df f12 font-weight-bold aaaa"
        style="
          align-items: normal;
          background: rgb(250, 250, 250);
          height: 48px;
          width: 860px;
          position: fixed;
          top: 241px;
        "
      >
        <div class="pre-td pre-td-code flex-center">
          <div>{{ number || '-' }}</div>
        </div>

        <div
          class="pre-td pre-td-name"
          style="
            display: flex;
            flex-direction: column-reverse;
            justify-content: center;
          "
        >
          <div class="f14">{{ school || '-' }}</div>
        </div>

        <div class="pre-td pre-td-plan flex-center">
          <div class="">{{ number2 || '-' }}</div>
        </div>

        <div
          @click="handleLineTitle"
          data-v-1cb8bebc=""
          class="pre-td pre-td-text text-center fw600 f12 pt40 pb40 flex-center"
        >
          <img src="../../assets/images/tiqianpi-search-flag.png" alt="" />
          <a data-v-1cb8bebc="" style="text-decoration: underline">
            历年分数
          </a>
        </div>

        <div class="pre-td pre-td-plan flex-center">
          <!-- <div>{{ item.collegeName }}</div> -->
          <div class="">-</div>
        </div>
      </div>

      <!-- list -->
      <div class="list-contaier f12" v-if="planList.length">
        <div
          v-for="(item, index) in planList"
          :key="item.tb_id"
          :class="'title' + index"
        >
          <!-- 标题 -->
          <div
            id="L"
            class="pre-td pre-td-title text-center text-666 f18 fw600"
            v-if="item.dataType == 'U'"
          >
            <div class="cntext">{{ item.title || '-' }}</div>
          </div>
          <!-- 大学 -->
          <div
            v-if="item.dataType == 'U'"
            id="U"
            class="df f12 font-weight-bold"
            style="
              align-items: normal;
              background: rgb(250, 250, 250);
              height: 98px;
            "
          >
            <div class="pre-td pre-td-code flex-center">
              <div>{{ item.collegeEnrollCode || '-' }}</div>
            </div>

            <div
              class="pre-td pre-td-name"
              style="
                display: flex;
                flex-direction: column-reverse;
                justify-content: center;
              "
            >
              <div class="f12" style="color: #999">
                {{ item.remark || '-' }}
              </div>
              <div class="f14">{{ item.collegeName || '-' }}</div>
            </div>

            <div class="pre-td pre-td-plan flex-center">
              <!-- <div>{{ item.collegeName }}</div> -->
              <div class="">{{ item.planNum || '-' }}</div>
            </div>

            <div
              data-v-1cb8bebc=""
              class="pre-td pre-td-text text-center fw600 f12 pt40 pb40 flex-center"
            >
              <img src="../../assets/images/tiqianpi-search-flag.png" alt="" />
              <a
                data-v-1cb8bebc=""
                style="text-decoration: underline"
                @click="handleLinianLine(item)"
              >
                历年分数
              </a>
            </div>

            <div class="pre-td pre-td-plan flex-center">
              <!-- <div>{{ item.collegeName }}</div> -->
              <div class="">
                {{ item.chooseSubject || '-' }}
              </div>
            </div>
          </div>
          <!-- 专业 -->
          <div
            v-if="item.dataType == 'M'"
            class="df f12 font-weight-bold"
            style="align-items: normal"
          >
            <div class="pre-td pre-td-code flex-center">
              <div>{{ item.professionEnrollCode || '-' }}</div>
            </div>

            <div
              class="pre-td pre-td-name"
              style="display: flex; flex-direction: column-reverse"
            >
              <div class="f12" style="color: #999">
                {{ item.remark || '-' }}
              </div>
              <div class="f14" style="margin-bottom: 10px">
                {{ item.majorName || '-' }}
              </div>
            </div>

            <div class="pre-td pre-td-code flex-center">
              <div>{{ item.planNum || '-' }}</div>
            </div>

            <div class="pre-td pre-td-code flex-center">
              <div>{{ item.cost || '-' }}</div>
            </div>

            <div class="pre-td pre-td-code flex-center">
              <div>{{ item.learnYearText || '-' }}</div>
            </div>

            <div class="pre-td pre-td-code flex-center">
              <div>{{ item.chooseSubject || '-' }}</div>
            </div>
          </div>
          <!-- 信息 -->
          <div class="tiqianpi-i-view" v-else-if="item.dataType == 'I'">
            <div style="margin: 20px 0 0 10px">{{ item.title || '-' }}</div>
          </div>
        </div>
      </div>
      <div v-else class="nodata">暂无数据</div>
    </div>

    <noIsVIP v-else></noIsVIP>
  </div>
</template>

<script setup>
import noIsVIP from '@/components/noIsVip/noIsVip';
import {
  getPreBatchPlan,
  getSchoolPlanFilter,
} from '/src/api/scoreline/scoreline';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
const store = useStore();
const planList = ref([]);
const number = ref(0);
const school = ref('');
const number2 = ref('');
const isShow = ref(false);
const tableLoading = ref(false);
const isVIP = computed(() => {
  return store.getters.user.userInfo.isVIP;
});

const fetchPreBatchPlan = () => {
  let reqData = {
    year: selecttextDX6.value,
    collegeCode: route.query.collegecode || '',
    provinceCode: store.getters.user.userInfo.pid || '',
  };
  tableLoading.value = true;

  getPreBatchPlan(reqData)
    .then((res) => {
      if (res.data.code == 20000) {
        planList.value = res.data.data;
        tableLoading.value = false;
      } else {
        tableLoading.value = false;
      }
    })
    .catch(() => {
      tableLoading.value = false;
    });
};
const popArrDX6 = ref([]);
const selecttextDX6 = ref('');
const allYearData = ref([]);
const fetchSchoolPlanFilter = () => {
  getSchoolPlanFilter({ pid: store.getters.user.userInfo.pid }).then((res) => {
    if (res.data.code == 20000) {
      popArrDX6.value = [];
      allYearData.value = res.data.data.years;
      res.data.data.years.forEach((item) => {
        popArrDX6.value.push(item.year);
      });
      selecttextDX6.value = popArrDX6.value[0] || '';
      fetchPreBatchPlan();
    }
  });
};
if (isVIP.value != 0) {
  fetchSchoolPlanFilter();
}
const yearChange = (val) => {
  selecttextDX6.value = val;
  fetchPreBatchPlan();
};

const handleLineTitle = () => {
  window.open(
    router.resolve('/college/tiqianpiScoreline?collegecode=' + number.value)
      .href,
    '_blank',
  );
};
const handleLinianLine = (item) => {
  window.open(
    router.resolve('/college/tiqianpiScoreline?collegecode=' + item.collegeCode)
      .href,
    '_blank',
  );
};
</script>

<style lang="scss" scoped>
#preFraction {
  height: 100%;

  .list-contaier {
    border: 1px solid #e8e8e8;
    width: 1200px !important;
    // height: calc(100vh - 500px);
    // height: 100%;
    overflow: hidden;
    overflow-y: auto;
    margin-bottom: 200px;
  }

  .cata-title {
    padding: 5px 12px;
    border-bottom: 1px solid #e8e8e8;
    border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    background: #fff;
  }

  .pre-head-tr {
    background: #fff;
    // border-left: 1px solid #ebeef5;
    color: #86909c !important;
  }

  .pre-tr {
    font-size: 14px;
    display: flex;
    // border-right: 1px solid #ebeef5;
  }

  .pre-td {
    // padding: 8px 5px;
    padding: 10px 5px 10px 10px;
    min-height: 36px;
    border: none;
    // border-top: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
  }

  .pre-td-code {
    width: 10%;
  }

  .pre-td-choose,
  .pre-td-cose,
  .pre-td-plan,
  .pre-td-year {
    width: 10%;
  }

  .pre-td-choosesubject {
    width: 10%;
  }

  .pre-td-name {
    width: 50%;
  }

  .pre-td-title {
    width: 100%;
    padding: 11px 5px;
  }

  .flex-center,
  .flex-column-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .pre-td-text {
    width: 20%;
  }
}

img {
  width: 15px;
  margin-right: 5px;
}

/* 信息 */
.tiqianpi-i-view {
  background-color: white;
  color: #666666;
  // font-size: 24px;
  font-weight: 400;
}

// .title1{
//   position: sticky;
//   top: 100px;
//   left: 0;
// }
.nborderbo {
  border-bottom: none !important;
}

:deep(.el-input-group__append) {
  width: 70px;
  background: var(--background-color);
  color: #fff;
}

.search-box {
  // position: fixed;
  // top: 100px;
  // // background-color: #fff;
  // width: 860px;
  // z-index: 100;
  // height: auto !important;
}

.nodata {
  margin-top: 200px;
  text-align: center;
  width: 860px;
  font-size: 14px;
  color: #666666;
}
</style>
